// 使用对象存储常量
const BaseConfig = {
	ITEM_CLASS: 'category-option-item'
}

class CategorySelector {
	constructor(options) {
		this.data = options.data;
		this.activeIndex = options.active || 0;
		this.container = document.querySelector(options.container);
		this.onChange = options.onChange || function() {}
		this.init();
	}

	init() {
		this.render();
		this.addStyles();
		this.bindEvents();
	}

	render() {
		if (this.data.length == 0) return;
		const html = this.data.map((item, index) =>
			this.generateItem(item, index)
		).join('');
		this.container.innerHTML = html;
	}

	bindEvents() {
		this.container.addEventListener('click', (e) => {
			const target = e.target.closest(
				`.${BaseConfig.ITEM_CLASS}`); //是一个用于DOM操作的方法，主要用于查找与当前元素匹配的最近祖先元素（包括自身）
			if (target) {
				const index = parseInt(target.dataset.index); // 直接使用target而非e.target
				this.selectOption(index);
			}
		});
	}

	generateItem(item, index) {
		return `<div class="${BaseConfig.ITEM_CLASS} ${this.activeIndex == index ? 'selected':''}" data-index="${index}">${item.name}</div>`
	}

	selectOption(index) {
		this.activeIndex = index;
		if (typeof this.onChange === 'function') {
			this.onChange({
				index,
				data: this.data[index]
			});
		}
		const optionItems = this.container.querySelectorAll(`.${BaseConfig.ITEM_CLASS}`);
		// 移除所有选中状态
		optionItems.forEach((item, i) => {
			item.classList.remove('selected');
			if (i === index) {
				item.classList.add('selected');
			}
		});
	}

	update(newData) {
		this.data = newData;
		this.activeIndex = 0;
		this.render();
	}

	addStyles() {
		this.styleElement = document.createElement('style');
		this.styleElement.textContent = `
		  :root {
		  	--primary-color: #4a6bff;
		  	--hover-color: #eee;
		  	--radius: 10px;
		  }
		
		  .${BaseConfig.ITEM_CLASS} {
		  	position: relative;
		  	padding: var(--gap);
		  	background: var(--bg-page);
		  	border-left: 4px solid transparent;
		  }
		  
		  .${BaseConfig.ITEM_CLASS}:hover {
		  	background: var(--hover-color);
		  }
		  
		  .${BaseConfig.ITEM_CLASS}.selected {
		  	background: white;
		  	border-left-color: var(--primary-color);
		  	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
		  }
		  
		  .${BaseConfig.ITEM_CLASS}.selected::before {
		  	content: '';
		  	position: absolute;
		  	right: 0;
		  	top: calc(-1 * var(--radius) + 1px);
		  	width: var(--radius);
		  	height: var(--radius);
		  	background: radial-gradient(circle at 0 0,
		  			transparent calc(var(--radius) - 1px),
		  			white var(--radius));
		  	z-index: 1;
		  }
		  
		  .${BaseConfig.ITEM_CLASS}.selected::after {
		  	content: '';
		  	position: absolute;
		  	right: 0px;
		  	bottom: calc(-1 * var(--radius) + 1px);
		  	width: var(--radius);
		  	height: var(--radius);
		  	background: radial-gradient(circle at 0 100%,
		  			transparent calc(var(--radius) - 1px),
		  			white var(--radius));
		  	z-index: 1;
		  }
		  
		  .${BaseConfig.ITEM_CLASS}:first-child.selected::before {
		  	opacity: 0;
		  }
		  
		  .${BaseConfig.ITEM_CLASS}:last-child.selected::after {
		  	opacity: 0;
		  }
		  
		  .${BaseConfig.ITEM_CLASS}.selected::after {
		  	animation: arc-glow 2s infinite alternate;
		  }
		`;
		document.head.appendChild(this.styleElement);
	}
}
